<template>
  <div class="ele-body">
    <a-row justify="space-around">
      <a-col :span="11">
        <a-card title="用户分享量">
          <EchartPie name="用户分享量" :data="fxData" style="height: 280px" />
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card title="周边访问量">
          <EchartBar
            name="周边访问量"
            :xData="zbData.xData"
            :yData="zbData.yData"
            style="height: 280px"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-row style="margin-top: 20px">
      <a-col :span="24">
        <a-card title="景点访问量">
          <EchartBar
            name="景点访问量"
            :xData="jdData.xData"
            :yData="jdData.yData"
            style="height: 280px"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
  import EchartBar from '@/views/neirong/statistics/components/echartBar.vue';
  import EchartPie from '@/views/neirong/statistics/components/echartPie.vue';
  import { ref } from 'vue';
  import {fxList, jdList, zbList} from '@/api/neirong/statistics';

  const fxData = ref([]);

  const zbData = ref({
    xData: [],
    yData: []
  });
  const jdData = ref({
    xData: [],
    yData: []
  });

  async function init() {
    const jd = await jdList();
    jdData.value.xData = jd.x;
    jdData.value.yData = jd.y;

    const zb = await zbList();
    zbData.value.xData = zb.x;
    zbData.value.yData = zb.y;

   fxData.value=await fxList()
  }

  init();
</script>
